<template>

  <view class="home-page">
    <view class="content-page">
      <!-- Logo 区域 -->
      <view class="logo-container">
        <view class="logo-placeholder">LOGO</view>
      </view>
      <!-- 搜索框 ---0 -->
      <view class="search-container">
        <input class="search-input" type="text" placeholder="请输入搜索内容" />
        <u-icon name="search" color="#2979ff" size="28"></u-icon>
      </view>

      <!-- Banner 区域 ------->
      <swiper class="banner-container" autoplay="true" interval="3000" circular="true" :indicator-dots="false">
        <swiper-item v-for="(item, index) in banners" :key="index">
          <image class="banner-image" :src="item.src" mode="aspectFill" />
        </swiper-item>
      </swiper>

      <!-- 热门球员模块 -->
      <view class="hot-players-container" @click="goToMoreMatches">
        <view class="hot-title">热门球员</view>
        <view class="hot-players">
          <!-- 左边大模块 2323-->
          <view class="player-large left-large">
            <view class="player-image-placeholder">
              <image class="player-image-left" src="/static/images/avatar.jpg" mode="aspectFill" />
            </view>
            <view class="player-info left">
              <text class="score">{{ hotPlayers[0].score }}杆</text>
              <text class="name">{{ hotPlayers[0].name }}</text>
              <text class="desc">{{ hotPlayers[0].desc }}</text>
              <text class="desc">{{ hotPlayers[0].date }}</text>
            </view>
          </view>
          <!-- 右边两个小模块 -->
          <view class="player-small">
            <view class="player-small-item" v-for="(player, index) in hotPlayers.slice(1)" :key="index">
              <view class="player-info">
                <text class="score">{{ player.score }}杆</text>
                <text class="name">{{ player.name }}</text>
              </view>
              <view class="player-image-placeholder">
                <image class="player-image-right" src="/static/images/avatar.jpg" mode="aspectFill" />
              </view>
            </view>
          </view>
        </view>
        <view class="hot-players">
          <!-- 左边两个小模块 -->
          <view class="player-small left-large">
            <view class="player-small-item" v-for="(player, index) in hotPlayers.slice(1)" :key="index">
              <view class="player-info">
                <text class="score">{{ player.score }}杆</text>
                <text class="name">{{ player.name }}</text>
              </view>
              <view class="player-image-placeholder">
                <image class="player-image-right" src="/static/images/avatar.jpg" mode="aspectFill" />
              </view>
            </view>
          </view>
          <!-- 右边大模块 -->
          <view class="player-large">
            <view class="player-image-placeholder">
              <image class="player-image-left" src="/static/images/avatar.jpg" mode="aspectFill" />
            </view>
            <view class="player-info left">
              <text class="score">{{ hotPlayers[0].score }}杆</text>
              <text class="name">{{ hotPlayers[0].name }}</text>
              <text class="desc">{{ hotPlayers[0].desc }}</text>
              <text class="desc">{{ hotPlayers[0].date }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 比赛进行中列表 -->
      <view class="ongoing-matches">
        <view class="live-badge">比赛进行中</view>

        <!-- 比赛信息 -->
        <view class="match-info">
          <view class="match-desc">长江商学院长江杯理事会队长秘书长联谊赛</view>
          <view class="match-date">Date: 05/06-07/06</view>
        </view>
        <!-- Tab 区域 -->
        <view class="tab-container">
          <view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }"
            @click="switchTab(index)">
            {{ tab }}
          </view>
        </view>
        <!-- 比赛表格 -->
        <view class="match-table">
          <view class="table-header">
            <text class="header-item">POS</text>
            <text class="header-item">Players</text>
            <text class="header-item">Tod</text>
            <text class="header-item">Thru</text>
            <text class="header-item">Tot</text>
          </view>
          <view class="table-row" v-for="(match, index) in filteredMatches" :key="index">
            <text class="row-item">{{ match.pos }}</text>
            <view class="row-item player-info">
              <image class="player-avatar" :src="match.avatar" />
              <text class="player-name">{{ match.name }}</text>
            </view>
            <text class="row-item">{{ match.tod }}</text>
            <text class="row-item">{{ match.thru }}</text>
            <text class="row-item">{{ match.tot }}</text>
          </view>
        </view>

        <!-- 查看更多 -->
        <view class="see-more" @click="goToMoreMatches">点击查看更多</view>
      </view>
      <view class="live-scoring-container">

        <view class="content-class">
          <!-- 比赛卡片 -->
          <view class="live-score-card">
            <!-- 比赛进行中标识 -->
            <view class="live-badge">比赛进行中</view>
            <!-- 比赛名称 & 日期信息 -->
            <view class="live-info">
              <text class="live-event-title">{{ liveEvent.title }}</text>
              <text class="live-event-date">Date: {{ liveEvent.date }}</text>
            </view>
          </view>

          <!-- Tab 切换 -->
          <view class="live-tab-container">
            <view class="live-tab" v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }"
              @click="switchTab(index)">
              {{ tab }}
            </view>
          </view>

          <!-- 成绩表格 -->
          <view class="live-table">
            <!-- 表头 -->
            <view class="table-header">
              <text class="header-item">POS</text>
              <text class="header-item">Players</text>
              <text class="header-item">Tod</text>
              <text class="header-item">Thru</text>
              <text class="header-item">Tot</text>
            </view>
            <!-- 表体 -->
            <view class="table-row" v-for="(match, index) in filteredMatches" :key="index">
              <text class="row-item pos">{{ match.pos }}</text>
              <view class="row-item player-cell">
                <image class="player-avatar" :src="match.avatar" mode="aspectFill" />
                <text class="player-name">{{ match.name }}</text>
              </view>
              <text class="row-item">{{ match.tod }}</text>
              <text class="row-item">{{ match.thru }}</text>
              <text class="row-item tot" :class="{ negative: match.tot < 0 }">
                {{ match.tot }}
              </text>
            </view>
          </view>

          <!-- 查看更多 -->
          <view class="see-more" @click="goToMoreMatches">点击查看更多</view>
        </view>
      </view>

      <!-- 热门赛事模块 -->
      <view class="hot-events-container">
        <view class="hot-events-title">热门赛事</view>
        <view class="hot-events-list">
          <view class="event-card" v-for="(event, index) in hotEvents" :key="index">
            <view class="event-image-container">
              <image :src="event.image" class="event-image" />
            </view>
            <view class="event-info">
              <text class="event-title">{{ event.title }}</text>
              <text class="event-location">{{ event.location }}</text>
              <text class="event-date">{{ event.date }}</text>
              <text class="event-status">{{ event.status }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 球队活动模块 -->
      <view class="team-activity-container">
        <view class="team-activity-header">
          <text class="team-activity-title">球队活动</text>
          <text class="more-button" @click="goToTeamActivity">更多 »</text>
        </view>
        <scroll-view class="activity-scroll-view" scroll-x="true" scroll-with-animation>
          <view class="activity-card" v-for="(activity, index) in teamActivities" :key="index">
            <view class="activity-info">
              <text class="activity-title">{{ activity.title }}</text>
              <text class="activity-date">📅 {{ activity.date }}</text>
              <text class="activity-location">📍 {{ activity.location }}</text>
              <text class="activity-arrow">➔</text>
            </view>
            <image class="activity-image" :src="activity.image" />
          </view>
        </scroll-view>
      </view>
      <!-- 旅游活动模块 -->
      <view class="travel-activity-container">
        <view class="travel-activity-header">
          <view class="english-title">TRAVEL ACTIVITY</view>
          <view class="title-cn">旅游活动</view>
        </view>

        <view class="travel-activity-list">
          <view class="travel-activity-item" v-for="(item, index) in travelActivities" :key="index">
            <image class="travel-activity-image" :src="item.image" mode="aspectFill" />
            <view class="travel-activity-info">
              <view class="activity-title">{{ item.title }}</view>
              <view class="activity-desc">{{ item.desc }}</view>
            </view>
            <view class="plus-button">+</view>
          </view>
        </view>
      </view>

      <!-- 联盟球场模块 -->
      <view class="league-stadium-container">
        <view class="league-stadium-header">
          <view class="english-title">LEAGUE STADIUM</view>
          <view class="title-cn">联盟球场</view>
        </view>

        <view class="stadium-card" v-for="(stadium, index) in leagueStadiums" :key="index">
          <!-- 单个球场信息 -->
          <view class="stadium-info-box">
            <!-- 球场Logo -->
            <image class="stadium-logo" :src="stadium.image" mode="aspectFill" />

            <!-- 球场信息 -->
            <view class="stadium-main">
              <view class="stadium-name">{{ stadium.name }}</view>
              <view class="stadium-location">{{ stadium.location }}</view>
            </view>

            <!-- 评分 / 收藏 / 分享 等 -->
            <view class="stadium-meta">
              <view class="stadium-rating">
                <!-- 这里只是示例，可根据 stadium 里的数据灵活拼接评分星星 -->
                <text class="rating-stars">★★★★★</text>
                <text class="rating-count">/ 26</text>
              </view>
              <view class="stadium-actions">
                <view class="heart-icon">♡</view>
                <view class="share-icon">⧉</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 校友俱乐部模块 -->
      <view class="alumni-club-container">
        <!-- 左上角英文 + 中文标题 -->
        <view class="alumni-club-header sbio_flex start-start">
          <text class="english-title">ALUMNI CLUB</text>
          <text class="title-cn">校友俱乐部</text>
        </view>

        <!-- 大图区域 -->
        <view class="alumni-banner">
          <!-- 大图（示例用avatar作为占位图，可替换成真实大图链接） -->
          <image class="alumni-image" :src="alumniClubData.banner" mode="aspectFill" />

          <!-- 文字和头像悬浮层 -->
          <view class="alumni-overlay">
            <!-- 左下角头像 + 文字描述 -->
            <view class="overlay-info">
              <!-- 头像 -->
              <image class="info-avatar" :src="alumniClubData.avatar" mode="aspectFill" />
              <!-- 标题/描述 -->
              <text class="info-desc">{{ alumniClubData.desc }}</text>
            </view>
            <!-- 右下角：点赞 / 评论 / 轮播指示 -->
            <view class="overlay-actions">
              <!-- 点赞/评论图标仅做演示，用 ★ 和 ☰ 代替，可自行替换 icon -->
              <view class="action-item">
                <text class="icon">★</text>
                <text class="count">{{ alumniClubData.likeCount }}</text>
              </view>
              <view class="action-item">
                <text class="icon">☰</text>
                <text class="count">{{ alumniClubData.commentCount }}</text>
              </view>
              <!-- 轮播指示 -->
              <view class="dots">
                <view class="dot" :class="{ active: true }"></view>
                <view class="dot"></view>
                <view class="dot"></view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 赞助商模块 -->
      <view class="sponsor-container">
        <view class="sponsor-header sbio_flex start-start">
          <text class="english-title">SPONSOR</text>
          <text class="title-cn">赞助商</text>
        </view>

        <!-- 赞助商LOGO列表 -->
        <view class="sponsor-list">
          <view class="sponsor-item" v-for="(item, index) in sponsors" :key="index"
            :style="{ backgroundColor: item.bgColor || '#ffffff' }">
            <!-- 可根据需要，使用 <image> 显示真正的logo，或直接文字bluegrass -->
            <image v-if="item.logo" class="sponsor-logo" :src="item.logo" mode="aspectFill" />
            <text v-else class="sponsor-text">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </view>
    <tabbar currentTab="home"></tabbar>
  </view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar'

export default {
  components: {
    tabbar
  },
  data() {
    return {
      statusBarHeight: 100,
      // Banner 数据（用占位数据模拟）
      banners: [
        { src: "/static/images/bg-image.jpg" },
        { src: "/static/images/avatar.jpg" },
        { src: "/static/images/avatar.jpg" },
      ],
      // 热门球员数据
      hotPlayers: [
        {
          image: "",
          score: "80",
          name: "Gene Ortiz",
          desc: "长江商学会友谊对抗赛",
          date: "2020/09/10",
        },
        {
          image: "",
          score: "76",
          name: "Gene Ortiz",
        },
        {
          image: "",
          score: "68",
          name: "Gene Ortiz",
        },
      ],
      tabs: ["总杆", "净杆", "团队"], // Tab 数据
      activeTab: 0, // 当前选中的 Tab
      ongoingMatches: [
        { pos: 1, avatar: "/static/images/avatar.jpg", name: "Gene Ortiz", tod: -6, thru: "F", tot: -19, type: "总杆" },
        { pos: 2, avatar: "/static/images/avatar.jpg", name: "Gene Ortiz", tod: -5, thru: "F", tot: -18, type: "净杆" },
        { pos: 3, avatar: "/static/images/avatar.jpg", name: "Gene Ortiz", tod: -4, thru: "F", tot: -17, type: "团队" },
        { pos: 4, avatar: "/static/images/avatar.jpg", name: "Gene Ortiz", tod: -3, thru: "F", tot: -16, type: "总杆" },
      ],
      hotEvents: [
        {
          image: "/static/images/avatar.jpg", // 占位图片
          title: "长江邀请赛",
          location: "成都麓山国际高尔夫球会",
          date: "2020/06/07 - 2020/06/08",
          status: "未开始",
        },
        {
          image: "/static/images/avatar.jpg", // 占位图片
          title: "国际友谊赛",
          location: "北京雁栖湖高尔夫俱乐部",
          date: "2020/07/10 - 2020/07/12",
          status: "已结束",
        },
        {
          image: "/static/images/avatar.jpg", // 占位图片
          title: "年度冠军赛",
          location: "上海佘山高尔夫俱乐部",
          date: "2020/08/20 - 2020/08/22",
          status: "进行中",
        },
      ],
      teamActivities: [
        {
          title: "山东烟台南山行",
          date: "25/06-27/06",
          location: "山东南山中高协训练基地",
          image: "/static/images/avatar.jpg",
        },
        {
          title: "浙江杭州休闲赛",
          date: "01/07-03/07",
          location: "杭州西湖国际球场",
          image: "/static/images/avatar.jpg",
        },
        {
          title: "上海浦东高球赛",
          date: "10/07-12/07",
          location: "浦东新区国际训练基地",
          image: "/static/images/avatar.jpg",
        },
      ],
      // 旅游活动示例数据
      travelActivities: [
        {
          image: "/static/images/avatar.jpg",
          title: "活动标题",
          desc: "旅游活动内容详细介绍旅游活动内容\n详细介绍……"
        },
        {
          image: "/static/images/avatar.jpg",
          title: "活动标题",
          desc: "旅游活动内容详细介绍旅游活动内容\n详细介绍……"
        },
      ],
      // 联盟球场示例数据
      leagueStadiums: [
        {
          image: "/static/images/avatar.jpg",
          name: "ROCK CAFE",
          location: "Bratislava (2,3km)",
          // rating、star等信息可自由扩展
        },
        {
          image: "/static/images/avatar.jpg",
          name: "SUBCLUB",
          location: "Bratislava (2,3km)",
        },
      ],
      // 校友俱乐部示例数据
      alumniClubData: {
        banner: "/static/images/avatar.jpg",   // 大图
        avatar: "/static/images/avatar.jpg",   // 用户头像
        desc: "Amazing afternoon in the city", // 文字描述
        likeCount: 23,
        commentCount: 29
      },

      // 赞助商数据示例
      sponsors: [
        {
          text: "bluegrass",         // 用文字模拟logo
          bgColor: "#c51d1d"         // 背景色(示例：红色)
        },
        {
          text: "洋河股份",
          bgColor: "#3492ff"         // 示例：蓝色
        },
        {
          text: "bluegrass",
          bgColor: "#ffffff"         // 示例：白色
        },
        {
          text: "博仕门窗",
          bgColor: "#d5d5d5"         // 灰色
        },
        {
          text: "bluegrass",
          bgColor: "#ffd600"         // 黄色
        },


      ]
    };
  },
  computed: {
    filteredMatches() {
      // 根据当前选中的 Tab 返回对应的比赛数据
      const tabMap = ["总杆", "净杆", "团队"];
      return this.ongoingMatches.filter(match => match.type === tabMap[this.activeTab]);
    },
  },
  onLoad() {

  },
  methods: {
    switchTab(index) {
      this.activeTab = index; // 切换 Tab
    },
    goToMoreMatches() {
      // 跳转到查看更多页面
      wx.navigateTo({ url: "/pages/moreMatches/index" });
    },
    goToTeamActivity() {
      // 跳转到球队活动的更多页面
      wx.navigateTo({ url: "/pages/teamActivity/teamActivity" });
    }
  },


};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>